<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="
     margin: 150px; border: 0px solid #000; width: 100px; height: 30px; position: relative;
     display:flex; align-items: center; border-radius: 4px; background: orange; justify-content: center;">
        <div class="abc">
            <input type="checkbox" name="" id="" >
            <spap>自动登录</spap>
        </div>
        <p style="display: none; position: absolute;">
            隐藏文字
        </p>
    </div>






</body>
<script>

    let htmlDivElement = document.querySelector("spap");
    var pp = document.querySelector("p");
    htmlDivElement.onmouseenter = function () {
        console.log("123")

        pp.style.display = "block";
        pp.style.width = "200px";
        pp.style.height = "100px";
        pp.style.left = "0px";
        pp.style.top = "15px";
        pp.style.height = "100px";
        pp.style.border = "1px red solid";
        pp.style.background = "gold"
    }
    htmlDivElement.onmouseleave = function () {
        console.log("456")
        var num = 100;
        var timer = setInterval(function () {
            let opacity = (num--)/100;
            if (opacity === 0) {
                clearInterval(timer);
            }
            console.log(opacity);
            pp.style.opacity = opacity;
        }, 10);

    }

</script>

</html>